<template>
  <view class="review-container">
    <view class="header">
      <text class="title">温故而知新</text>
    </view>
    
    <!-- 系统推荐区域 -->
    <view class="section">
      <text class="section-title">系统推荐</text>
      <view class="recommendations">
        <view class="recommendation-card" v-for="item in recommendations" :key="item.id" @tap="navigateToRecommendation(item)">
          <view class="recommendation-icon">{{ item.icon }}</view>
          <text class="recommendation-title">{{ item.title }}</text>
          <text class="recommendation-desc">{{ item.description }}</text>
        </view>
      </view>
    </view>
    
    <!-- 用户自定义九宫格区域 -->
    <view class="section">
      <text class="section-title">我的学习</text>
      <view class="customized-grid">
        <view class="grid-item" v-for="item in customizedGridItems" :key="item.id" @tap="navigateToCollectionByCategory(item.category)">
          <text class="grid-item-icon">{{ item.icon }}</text>
          <text class="grid-item-title">{{ item.title }}</text>
          <text class="grid-item-count">{{ item.count }} 项</text>
        </view>
        <!-- 添加更多按钮 -->
        <view class="grid-item add-item" @tap="openCustomizationPanel">
          <text class="add-icon">+</text>
          <text class="grid-item-title">添加</text>
        </view>
      </view>
    </view>
    
    <!-- 自定义面板 (默认隐藏) -->
    <view class="customization-panel" v-if="showCustomizationPanel" :class="{ 'panel-show': showCustomizationPanel }">
      <view class="panel-header">
        <text class="panel-title">自定义九宫格</text>
        <text class="panel-close" @tap="closeCustomizationPanel">×</text>
      </view>
      <scroll-view class="panel-content" scroll-y="true">
        <view class="available-categories">
          <text class="category-title">可用分类</text>
          <view class="category-list">
            <view class="category-item" v-for="category in availableCategories" :key="category" @tap="addCategoryToGrid(category)">
              <text class="category-name">{{ category }}</text>
              <text class="add-btn">+</text>
            </view>
          </view>
        </view>
        <view class="selected-categories" v-if="selectedCategories.length > 0">
          <text class="category-title">已选分类</text>
          <view class="selected-list">
            <view class="selected-item" v-for="category in selectedCategories" :key="category">
              <text class="category-name">{{ category }}</text>
              <text class="remove-btn" @tap="removeCategoryFromGrid(category)">×</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="panel-footer">
        <button class="cancel-btn" @tap="closeCustomizationPanel">取消</button>
        <button class="confirm-btn" @tap="confirmCustomization">确定</button>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="modal-overlay" v-if="showCustomizationPanel" :class="{ 'modal-show': showCustomizationPanel }" @tap="closeCustomizationPanel"></view>
  </view>
</template>

<script>
export default {
  name: 'ReviewPage',
  data() {
    return {
      // 系统推荐数据
      recommendations: [
        {
          id: 1,
          icon: '📚',
          title: '雅思单词',
          description: '每日学习50个核心雅思词汇',
          route: '/pages/review/ielts-words'
        },
        {
          id: 2,
          icon: '💻',
          title: 'Python编程',
          description: '基础语法到高级应用',
          route: '/pages/review/python'
        },
        {
          id: 3,
          icon: '📱',
          title: 'web前端开发',
          description: 'HTML/CSS/JavaScript基础',
          route: '/pages/review/web-dev'
        }
      ],
      
      // 用户自定义九宫格数据
      customizedGridItems: [
        {
          id: 1,
          icon: '📝',
          title: '学习笔记',
          category: '学习笔记',
          count: 12
        },
        {
          id: 2,
          icon: '💡',
          title: '技术总结',
          category: '技术总结',
          count: 8
        },
        {
          id: 3,
          icon: '📅',
          title: '生活记录',
          category: '生活记录',
          count: 5
        }
      ],
      
      // 可用分类（从收集页获取）
      availableCategories: ['学习笔记', '技术总结', '生活记录', '其他'],
      
      // 已选分类
      selectedCategories: ['学习笔记', '技术总结', '生活记录'],
      
      // 自定义面板显示状态
      showCustomizationPanel: false
    };
  },
  
  onLoad() {
    // 页面加载时从存储中获取用户配置
    this.loadUserConfig();
    // 模拟获取收集页的分类
    this.fetchCategoriesFromCollection();
  },
  
  methods: {
    // 加载用户配置
    loadUserConfig() {
      try {
        const config = uni.getStorageSync('reviewPageConfig');
        if (config) {
          const parsedConfig = JSON.parse(config);
          this.customizedGridItems = parsedConfig.gridItems || this.customizedGridItems;
          this.selectedCategories = parsedConfig.selectedCategories || this.selectedCategories;
        }
      } catch (e) {
        console.error('加载用户配置失败', e);
      }
    },
    
    // 保存用户配置
    saveUserConfig() {
      try {
        const config = {
          gridItems: this.customizedGridItems,
          selectedCategories: this.selectedCategories
        };
        uni.setStorageSync('reviewPageConfig', JSON.stringify(config));
      } catch (e) {
        console.error('保存用户配置失败', e);
      }
    },
    
    // 从收集页获取分类（实际项目中可能需要通过API或全局状态管理获取）
    fetchCategoriesFromCollection() {
      // 这里模拟从收集页获取分类数据
      // 实际项目中可能需要调用API或访问全局状态
      // 暂时使用硬编码的分类
    },
    
    // 导航到系统推荐内容
    navigateToRecommendation(item) {
      // 这里实现跳转到系统推荐内容页面
      console.log('导航到系统推荐内容:', item.title);
      // 示例导航代码
      // uni.navigateTo({ url: item.route });
    },
    
    // 导航到收集页的特定分类
    navigateToCollectionByCategory(category) {
      console.log('导航到分类:', category);
      // 跳转到收集页并带上分类参数
      uni.navigateTo({
        url: `/pages/collection/index?category=${encodeURIComponent(category)}`
      });
    },
    
    // 打开自定义面板
    openCustomizationPanel() {
      this.showCustomizationPanel = true;
    },
    
    // 关闭自定义面板
    closeCustomizationPanel() {
      this.showCustomizationPanel = false;
    },
    
    // 添加分类到九宫格
    addCategoryToGrid(category) {
      if (!this.selectedCategories.includes(category) && this.selectedCategories.length < 8) {
        this.selectedCategories.push(category);
        // 生成新的九宫格项
        const newItem = {
          id: Date.now(), // 使用时间戳作为唯一ID
          icon: this.getRandomIcon(),
          title: category,
          category: category,
          count: 0 // 实际项目中这里应该获取该分类下的条目数量
        };
        this.customizedGridItems.push(newItem);
      } else if (this.selectedCategories.length >= 8) {
        uni.showToast({ title: '九宫格最多只能添加8个分类', icon: 'none' });
      }
    },
    
    // 从九宫格移除分类
    removeCategoryFromGrid(category) {
      const index = this.selectedCategories.indexOf(category);
      if (index > -1) {
        this.selectedCategories.splice(index, 1);
        // 同时从九宫格项中移除
        const gridIndex = this.customizedGridItems.findIndex(item => item.category === category);
        if (gridIndex > -1) {
          this.customizedGridItems.splice(gridIndex, 1);
        }
      }
    },
    
    // 确认自定义设置
    confirmCustomization() {
      this.saveUserConfig();
      this.closeCustomizationPanel();
      uni.showToast({ title: '设置已保存', icon: 'success' });
    },
    
    // 获取随机图标
    getRandomIcon() {
      const icons = ['📝', '💡', '📅', '🔧', '🔍', '📚', '💻', '🎯', '🌟', '🚀'];
      return icons[Math.floor(Math.random() * icons.length)];
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.review-container {
  padding: 20rpx;
  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

/* 头部样式 */
.header {
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 区域标题样式 */
.section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

/* 系统推荐区域样式 */
.recommendations {
  display: flex;
  overflow-x: auto;
  gap: 20rpx;
  padding-bottom: 10rpx;
}

.recommendation-card {
  min-width: 300rpx;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.recommendation-card:active {
  transform: scale(0.98);
}

.recommendation-icon {
  font-size: 60rpx;
  margin-bottom: 15rpx;
}

.recommendation-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.recommendation-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

/* 用户自定义九宫格样式 */
.customized-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.grid-item {
  background-color: #fff;
  padding: 25rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.2s ease;
  aspect-ratio: 1;
}

.grid-item:active {
  transform: scale(0.98);
}

.grid-item-icon {
  font-size: 48rpx;
  margin-bottom: 15rpx;
}

.grid-item-title {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.grid-item-count {
  font-size: 20rpx;
  color: #999;
}

.add-item {
  background-color: #f8f8f8;
  border: 1rpx dashed #ddd;
}

.add-icon {
  font-size: 48rpx;
  color: #999;
  margin-bottom: 15rpx;
}

/* 自定义面板样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.modal-show {
  opacity: 1;
}

.customization-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  height: 80vh;
  background-color: #fff;
  z-index: 999;
  transition: bottom 0.3s ease;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  display: flex;
  flex-direction: column;
}

.customization-panel.panel-show {
  bottom: 0;
}

.panel-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.panel-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.panel-content {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.available-categories,
.selected-categories {
  margin-bottom: 40rpx;
}

.category-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.category-list,
.selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.category-item,
.selected-item {
  background-color: #f5f5f5;
  padding: 15rpx 25rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 150rpx;
}

.selected-item {
  background-color: #e3f2fd;
  color: #1976d2;
}

.category-name {
  font-size: 26rpx;
  color: #333;
}

.selected-item .category-name {
  color: #1976d2;
}

.add-btn,
.remove-btn {
  font-size: 24rpx;
  color: #007aff;
  margin-left: 10rpx;
  font-weight: bold;
}

.remove-btn {
  color: #f44336;
}

.panel-footer {
  padding: 30rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  gap: 20rpx;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.confirm-btn {
  background-color: #007aff;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}
</style>